<template>
  <div class="container">
    <div>
      <div>
        <span @click="$router.back(-1)"
              class="back">{{$t('page.back')}}{{$t('page.list')}}</span> > {{$route.query.name}}（{{$route.query.time}}）
      </div>
    </div>

    <div class="container-body"
         v-loading="loading">

      <template>
        <div class="title-space">
          <span>{{$t('page.ODvalue')}}：</span>
        </div>

        <div class="overflow">
          <table id="table-1"
                 width="100%"
                 v-for="(listItem,listIndex) in originalData">

            <tr v-for="(table,key,index) in listItem"
                :key="index">
              <td class="color-000">{{key!=='time'?key:$t('page.hole')}}</td>
              <td>
                <span v-if="key!=='time'">
                  {{beforeLable[index-1]}}{{unit}}
                </span>
                <span class="color-000"
                      v-else>
                  {{$t('page.label')}}
                </span>
              </td>
              <td v-for="iTable in table">
                <span v-if="key!=='time'">{{iTable}}</span>
                <span class="color-000"
                      v-else>{{iTable + 's'}}</span>
              </td>
            </tr>
          </table>
        </div>

        <div class="space text-center">
          <div class="chart"
               v-for="(chart,index) in allStepOneCharts">
            <wave-chart :id="'logStepOne1'+index"
                        :data='chart'></wave-chart>
          </div>
        </div>

        <!-- <div class="title-space">
          <span>计算结果：</span>
        </div>

        <div class="title-space">
          <span>{{$t('page.molecular')}}（Da）：</span>
          {{mole}}
        </div> -->

        <div class="space">
          <div class="overflow">
            <table id="table-1"
                   width="100%">

              <template v-for="resValue,resIndex in paramResult">
                <tr>
                  <td v-for="v,k,i in resValue">{{k}}</td>
                </tr>
                <tr>
                  <td v-for="v,k,i in resValue">{{v}}</td>
                </tr>
              </template>
            </table>
          </div>
        </div>
      </template>

      <!-- <div class="space text-center">
      </div> -->

    </div>
  </div>
</template>

<script>
import waveChart from '@/components/WaveChart'
import { fetchHistoryDetail } from '@/api/table'
import {COLORLIST} from '@/utils/variate'
export default {
  data() {
    return {
      loading: true,
      stepTwoList: [],
      originalData: [],
      originalDataRate: [],
      lightValue: [],
      lightRate: [],
      allLightRateCharts: [],
      allStepOneCharts: [],
      waveLength: [],
      waveLengthDiff: {},
      waveCharts: [],
      exlName: '',
      mole: '',
      tableTop: [],
      imgList: '',
      parameter: [],
      waveName: [],
      virusLabel: [],
      beforeLable: [],
      baseStepOne: [],
      doDownload: false,
      paramResult: [],
      unit: '',
    }
  },
  components: {
    waveChart,
  },
  mounted() {
    this.getHistoryDetail()
  },
  methods: {
    async getHistoryDetail() {
      const res = await fetchHistoryDetail({
        id: this.$route.query.id,
      })
      this.loading = false
      this.mole = res.data[0].mole
      const data = JSON.parse(res.data[0].resultData)
      this.beforeLable = JSON.parse(res.data[0].crpValue)
      console.log(data)
      this.unit = data.unit
      this.originalData = data.originalData
      this.paramResult = data.paramResult
      this.waveName = data.hole

      this.drawChart()
    },
    sortObj(obj) {
      var arr = []
      for (var i in obj) {
        arr.push([obj[i], i])
      }
      arr.reverse()
      var len = arr.length
      var obj = {}
      for (var i = 0; i < len; i++) {
        obj[arr[i][1]] = arr[i][0]
      }
      return obj
    },
    downloadExl() {
      const href = `${process.env.BASE_URL}receive/download/excel/1/${this.exlName}`
      window.open(href, '_blank')
    },
    drawChart() {
      this.allStepOneCharts = []
      this.originalData.forEach((item, index, arry) => {
        let chartsOption = {
          title: {
            text: '',
          },
          animation: false,
          tooltip: {
            trigger: 'axis',
          },
          color: COLORLIST,
          legend: {
            type: 'scroll',
            orient: 'vertical',
            align: 'left',
            // left: 'right',
            right: '20',
            top: '60',
            icon: 'circle',
            data: [],
            textStyle: {
              fontSize: 20
            },
          },
          grid: {
            left: '5%',
            right: '13%',
            bottom: '15%',
            containLabel: true,
          },
          dataZoom: [
            {
              type: 'inside',
              height: 15,
              handleSize: '140%',
              handleStyle: {
                color: '#999',
              },
              xAxisIndex: [0, 1],
              filterMode: 'none',
            },
            {
              type: 'inside',
              yAxisIndex: 0,
              width:  15,
              handleSize: '140%',
              handleStyle: {
                color: '#999',
              },
              filterMode: 'none',
            },
          ],
          toolbox: {
            feature: {
              saveAsImage: {},
            },
          },
          xAxis: [
            {
              type: 'category',
              axisTick: {
                alignWithLabel: true,
              },
              name: 'Time/s',
              nameLocation: 'middle',
              nameTextStyle: {
                fontSize: 20,
                padding: 20,
                color: '#000'
              },
              boundaryGap: true,
              minInterval: 120,
              data: [],
              axisLabel: {
                fontSize: 22
              },
            },
            {
              axisLine: {
                onZero: false
              },
              boundaryGap: true,
              position: 'bottom',
              type: 'category',
              axisTick: {
                alignWithLabel: true,
                length: 3,
                interval: 'auto',
              },
              axisLabel: {
                fontSize: 22
              },
              data: []
            },
          ],
          yAxis: {
            type: 'value',
            splitNumber: 8,
            name: 'Relative Response(RU)',
            nameLocation: 'middle',
            nameGap: 30,
            nameTextStyle: {
              fontSize: 20,
              padding: 10,
              color: '#000'
            },
          },
          series: [],
        }
        chartsOption.series = []
        chartsOption.xAxis.data = []
        let num = 0
        for (let i in item) {
          if (i !== 'time') {
            let chartSeries = {
              name: `${this.beforeLable[num]}μg/ml`,
              type: 'line',
              lineStyle: {
                width: 2.2
              },
              // smooth: true,
              showSymbol: false,
              hoverAnimation: false,
              data: item[i],
            }
            chartsOption.title.text =
              this.$t('page.dynamics') + this.$t('page.curve')
            chartsOption.legend.data.push(`${this.beforeLable[num]}μg/ml`)
            chartsOption.series.push(chartSeries)
            num++
          } else {
            chartsOption.xAxis[0].data = item[i]
            chartsOption.xAxis[1].data = Array.from({ length: item[i].length }, (_, i) => "")
          }
        }
        this.allStepOneCharts.push(chartsOption)
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20px;
}
.back {
  color: #028cdf;
  cursor: pointer;
}
table {
  border-collapse: collapse;
  text-align: center;
  white-space: nowrap;
  margin-bottom: 20px;
}
.img-list {
  width: 1000px;
  display: flex;
  flex-wrap: wrap;
}
.img-item {
  width: 500px;
}

#table-2 {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #000;
}
#table-2 tr {
  border: 1px solid #000 !important;
}

#table-2 td:first-child {
  border-left: 1px solid #000;
}

/* Padding and font style */
#table-2 td,
#table-2 th {
  padding: 10px 15px;
  font-size: 12px;
  font-family: Verdana;
  border-right-width: 1px;
  border-right-style: solid;
}

.data-item {
  display: block;
}

@media screen and (min-width: 1000px) {
  .data-item {
    display: inline-block;
    margin-right: 20px;
  }
}
</style>